<template>
  <div>
    <FrontSideTable
      v-show="!isMemberVisible"
      ref="sideTable"
      dataUrl="/bridge/bridgeSide/getListByBridgeId"
      :dataParam="{bridgeId:currentBridge.id}"
      addUrl="/bridge/bridgeSide/add"
      editUrl="/bridge/bridgeSide/edit"
      deleteUrl="/bridge/bridgeSide/delete"
      :tableTitle="tableTitle"
      :columns="columns"
      searchHint="输入关键字查找"
      :searchProps="searchProps"
      :form="form"
      formDialogSize="small"
      :loadingForm="loadingForm"
      :rules="rules"
      manageBtnName="构件"
      @beforeAdd="handleAdd"
      @beforeEdit="handleEdit"
      @onManage="handleManage"
      @onCopy="handleCopy"
      @onBack="handleBack"
      @onCreated="handleCreated"
      canBack
      manageable>
      <!--展开列-->
      <template slot="beforeColumns">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline label-width="120px" class="table-expand">
              <el-form-item label="桥名">
                <span>{{ props.row.bridgeName }}</span>
              </el-form-item>
              <el-form-item label="分幅类型">
                <span>{{ props.row.sideTypeName }}</span>
              </el-form-item>
              <el-form-item label="路线号">
                <span>{{ props.row.roadName }}</span>
              </el-form-item>
              <el-form-item label="桩号">
                <span>{{ props.row.stakeNo }}</span>
              </el-form-item>
              <el-form-item label="桥长(m)">
                <span>{{ props.row.bridgeLength }}</span>
              </el-form-item>
              <el-form-item label="跨径组合(m)">
                <span>{{ props.row.bridgeSpanCombination }}</span>
              </el-form-item>
              <el-form-item label="桥面分离形式">
                <span>{{ props.row.deckDivideTypeName }}</span>
              </el-form-item>
              <el-form-item label="桥面总宽(m)">
                <span>{{props.row.deckTotalWidth}}</span>
              </el-form-item>
              <el-form-item label="车行道宽(m)">
                <span>{{props.row.laneWidth}}</span>
              </el-form-item>
              <el-form-item label="桥面标高(m)">
                <span>{{props.row.deckEvaluation}}</span>
              </el-form-item>
              <el-form-item label="桥下净高(m)">
                <span>{{props.row.subClearHeight}}</span>
              </el-form-item>
              <el-form-item label="桥上净高(m)">
                <span>{{props.row.superClearHeight}}</span>
              </el-form-item>
              <el-form-item label="引道总宽(m)">
                <span>{{props.row.accessTotalWidth}}</span>
              </el-form-item>
              <el-form-item label="引道路面宽(m)">
                <span>{{props.row.accessRoadWidth}}</span>
              </el-form-item>
              <el-form-item label="引道线形(m)">
                <span>{{props.row.accessLinearName}}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
      </template>
      <!--表单-->
      <template slot="form">
        <!--第一行-->
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="分幅类型" prop="sideTypeId">
              <el-select v-model="form.sideTypeId" style="width: 100%" placeholder="请选择分幅类型" filterable>
                <el-option v-for="item of sideTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="桥位桩号" prop="stakeNo">
              <el-input type="number" v-model.number="form.stakeNo" placeholder="请输入桩号，格式为000.000"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--第二行-->
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="桥长(m)" prop="bridgeLength">
              <el-input type="number" v-model.number="form.bridgeLength" placeholder="请输入桥长"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="桥面总宽(m)">
              <el-input type="number" v-model.number="form.deckTotalWidth" placeholder="请输入桥面总宽"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--第三行-->
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="车行道宽(m)">
              <el-input type="number" v-model.number="form.laneWidth" placeholder="请输入车行道宽"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="桥面标高(m)">
              <el-input type="number" v-model.number="form.deckEvaluation" placeholder="请输入桥面标高"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--第四行-->
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="桥下净高(m)">
              <el-input type="number" v-model.number="form.subClearHeight" placeholder="请输入桥下净高"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="桥上净高(m)">
              <el-input type="number" v-model.number="form.superClearHeight" placeholder="请输入桥上净高"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--第五行-->
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="引道总宽(m)">
              <el-input type="number" v-model.number="form.accessTotalWidth" placeholder="请输入引道总宽"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="引道路面宽(m)">
              <el-input type="number" v-model.number="form.accessRoadWidth" placeholder="请输入引道路面宽"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--第六行-->
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="引道线形">
              <el-select v-model="form.accessLinearId" style="width: 100%;" placeholder="请选择引道线形" filterable clearable>
                <el-option v-for="item of accessLinearList" :key="item.id" :label="item.name"
                           :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
    </FrontSideTable>
    <!--构件管理界面-->
    <MemberManagement
      v-if="isMemberVisible"
      :currentSide="currentSide"
      @onBack="handleMemberBack">
    </MemberManagement>
  </div>
</template>

<script>
  import FrontSideTable from "../template/FrontSideTable.vue"
  import MemberManagement from "../template/MemberManagement.vue"

  let oldSideTypeId = "";

  export default {
    name: "SideManagement",
    props: {
      //当前操作的桥梁
      currentBridge: {
        type: Object,
        required: true
      },
      sideTypeList: {
        type: Array,
        required: true
      },
      accessLinearList: {
        type: Array,
        required: true
      }
    },
    data() {
      //分幅类型校验
      let sideTypeValidator = (rule, value, callback) => {
        if (oldSideTypeId === value) {
          callback();
        } else if (this.dataList.some(item => item.sideTypeId === value)) {
          callback(new Error("分幅已存在"));
        } else {
          callback();
        }
      };

      return {
        dataList: [],
        columns: [
          {prop: "sideTypeName", label: "分幅名称"},
          {prop: "bridgeName", label: "桥名"},
          {prop: "roadName", label: "路线号"},
          {prop: "stakeNo", label: "桩号"},
          {prop: "bridgeLength", label: "桥长(m)"},
          {prop: "bridgeSpanCombination", label: "跨径组合(m)", width: "300px"}
        ],
        searchProps: ["sideTypeName", "bridgeName", "roadName", "stakeNo"],
        form: {
          sideTypeId: "",
          accessLinearId: "",
        },
        loadingForm: false,
        rules: {
          sideTypeId: [
            {required: true, message: "请选择分幅类型", trigger: "blur"},
            {validator: sideTypeValidator, trigger: "blur"}
          ],
          stakeNo: [
            {required: true, type: "number", message: "请输入桥位桩号", trigger: "blur"}
          ],
          bridgeLength: [
            {required: true, type: "number", message: "请输入桥长", trigger: "blur"}
          ]
        },
        isMemberVisible: false,
        currentSide: {bridgeName: "", sideTypeName: ""}
      }
    },
    computed: {
      tableTitle() {
        return "桥梁分幅管理 / " + this.currentBridge.roadName + " " + this.currentBridge.name;
      }
    },
    methods: {
      handleAdd() {
        oldSideTypeId = "";
        this.form = {
          bridgeId: this.currentBridge.id,
          sideTypeId: "",
          accessLinearId: ""
        }
      },
      handleEdit(data) {
        oldSideTypeId = data.sideTypeId;
        this.form = {...data};
      },
      handleManage(data) {
        this.currentSide = data;
        this.isMemberVisible = true;
      },
      handleCopy(data) {
        oldSideTypeId = "";
        this.form = {...data, sideTypeId: "", copySideTypeId: data.sideTypeId, isCopy: 1}
      },
      handleBack() {
        this.$emit("onSideBack");
      },
      handleCreated(data) {
        this.dataList = data;
      },
      handleMemberBack() {
        this.isMemberVisible = false;
        this.currentSide = {};
        this.$refs["sideTable"].fetchData();
      }
    },
    components: {FrontSideTable, MemberManagement}
  }
</script>

<style scoped>
  .table-expand {
    font-size: 0;
  }

  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 32%;
  }
</style>


// WEBPACK FOOTER //
// SideManagement.vue?7a42df6c
